<template>
  <div>
    <!--官方门票管理 -->
    <p></p>
    <div>
      <el-form :inline="true" class="orderform">
        <el-row>
          <el-col :span="6">
            <el-form-item>
              <el-input style="width: 300px" placeholder="请输入..." v-model="tag" class="search_tag" clearable></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <span>商品状态:</span>
            <el-select v-model="select_value" clearable placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
            <el-form-item>
              <el-button type="primary" @click="btn_search()"><i class="el-icon-search"></i> 搜索</el-button>
              <el-button @click="btn_clear()"><i class="el-icon-remove-outline"></i> 重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
        <el-table
          :data="tableData"
          ref="multipleTable"
          :highlight-current-row="true"
          border>
          <el-table-column
            prop="id"
            label="编号">
          </el-table-column>
          <el-table-column
            prop="showName"
            label="演出名称">
          </el-table-column>
          <el-table-column
            prop="showType"
            label="演出类型">
          </el-table-column>
          <el-table-column
            prop="showPrice"
            label="演出价格区间(元)">
          </el-table-column>
          <el-table-column
            prop="showStatus"
            label="销售状态">
          </el-table-column>
          <el-table-column
            prop="showTime"
            label="演出时间"
            :formatter="dateFormat">
          </el-table-column>
          <el-table-column
            prop="showCity"
            label="演出城市">
          </el-table-column>
          <el-table-column
            prop="showField"
            label="演出场地">
          </el-table-column>
          <el-table-column
            prop="showAddress"
            label="详细地址">
          </el-table-column>
          <el-table-column
            prop="showOrganiser"
            label="主办方">
          </el-table-column>
          <el-table-column
            fixed="right"
            label="操作">
            <template slot-scope="scope">
              <el-button  v-if="roles[0] === 'admin'" @click="handleClickUpDown(scope.row)" type="text">上下架</el-button>
              <el-button  @click="handleClickModify(scope.row)" type="text">修改</el-button>
            </template>
          </el-table-column>
        </el-table>

        <div class="mydiv">
          <el-pagination
            @current-change="handleCurrentChange"
            :current-page.sync="pageNo"
            :page-size="pageSize"
            layout="total, prev, pager, next"
            :total="totalDataNumber"
            class="table-pagination">
          </el-pagination>
        </div>
      </el-form>

      <!-- 修改客户弹出框 -->
      <el-dialog title="修改"
                 :before-close="handleClose"
                 :visible.sync="dialogFormModifyVisible">

        <el-steps :active="activeStep" align-center>
          <el-step title="修改演出相关信息"></el-step>
          <el-step title="修改演出艺人相关信息"></el-step>
          <el-step title="修改门票相关信息"></el-step>
        </el-steps>

        <!--第一步 演出相关信息 -->
        <el-form v-if="showForm.show" :model="showForm" :visible.sync="dialogFormVisible">
          <el-form-item label="演出名称" :label-width="formLabelWidth">
            <el-input v-model="form.showName"></el-input>
          </el-form-item>
          <el-form-item label="演出类型" :label-width="formLabelWidth">
            <el-select v-model="form.showType" clearable placeholder="请选择">
              <el-option
                v-for="item in typeoptions"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="演出封面" :label-width="formLabelWidth">
            <el-upload
              :action="uploadUrl()"
              :on-remove="handleRemove1"
              :on-success="handleSuccess1"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :file-list="form.showCoverList"
              list-type="picture-card">
              <el-button size="small" type="primary">点击上传封面图片</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="演出相册" :label-width="formLabelWidth">
            <el-upload
              :action="uploadUrl()"
              :on-remove="handleRemove5"
              :on-success="handleSuccess5"
              :on-preview="handlePictureCardPreview"
              :limit="10"
              :on-exceed="handleExceed2"
              :file-list="form.showPhotos"
              list-type="picture-card">
              <i class="el-icon-plus"></i>
              <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
              </el-dialog>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="演出价格区间" :label-width="formLabelWidth">
            <el-input v-model="form.showPrice" disabled=""></el-input>
          </el-form-item>
          <el-form-item label="销售状态" :label-width="formLabelWidth">
            <el-input v-model="form.showStatus" disabled></el-input>
          </el-form-item>
          <el-form-item label="演出时间" :label-width="formLabelWidth">
            <el-date-picker
              v-model="form.showTime"
              type="datetime"
              placeholder="选择日期时间"
              default-time="12:00:00"
              value-format="timestamp">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="演出城市" :label-width="formLabelWidth">
            <el-input v-model="form.showCity"></el-input>
          </el-form-item>
          <el-form-item label="演出场地" :label-width="formLabelWidth">
            <el-input v-model="form.showField"></el-input>
          </el-form-item>
          <el-form-item label="演出场地图片" :label-width="formLabelWidth">
            <el-upload
              :action="uploadUrl()"
              :on-remove="handleRemove2"
              :on-success="handleSuccess2"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :file-list="form.showFieldPhotoList"
              list-type="picture-card">
              <el-button size="small" type="primary">点击上传演出场地图片</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
            </el-upload>
          </el-form-item>
          <el-form-item label="详细地址" :label-width="formLabelWidth">
            <el-input v-model="form.showAddress"></el-input>
          </el-form-item>
          <el-form-item label="主办方" :label-width="formLabelWidth">
            <el-input v-model="form.showOrganiser"></el-input>
          </el-form-item>
          <el-form-item label="主办方照片" :label-width="formLabelWidth">
            <el-upload
              :action="uploadUrl()"
              :on-remove="handleRemove4"
              :on-success="handleSuccess4"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :file-list="form.showOrganiserPhotoList"
              list-type="picture-card">
              <el-button size="small" type="primary">点击上传主办方照片</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
            </el-upload>
          </el-form-item>
        </el-form>

        <!--第二步 艺人信息 -->
        <el-form v-if="actorForm.show" :model="actorForm" :visible.sync="dialogFormVisible">
          <el-form-item label="艺人名字" :label-width="formLabelWidth">
            <el-input v-model="actorForm.actorName"></el-input>
          </el-form-item>
          <el-form-item label="艺人图片" :label-width="formLabelWidth">
            <el-upload
              ref="upload"
              :action="uploadUrl()"
              :on-remove="handleRemove3"
              :on-success="handleSuccess3"
              multiple
              :limit="1"
              :on-exceed="handleExceed"
              :file-list="form.actorImgUrlList">
              <el-button size="small" type="primary">点击上传艺人图片</el-button>
              <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过2MB</div>
            </el-upload>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth">
            <el-button type="primary" @click="addActor()">添加</el-button>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth">
            <el-table
              :data="form.showActors"
              ref="multipleTable"
              :highlight-current-row="true"
              border>
              <el-table-column
                prop="actorName"
                label="艺人名称">
              </el-table-column>
              <el-table-column
                prop="actorImgRealUrl"
                label="艺人图片">
                <template slot-scope="scope">
                  <img :src="scope.row.actorImgRealUrl" alt="艺人图片" width="100" height="100">
                </template>
              </el-table-column>
              <el-table-column
                 prop="actorImgUrl"
                 label="艺人图片地址" v-if="false">
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作">
                <template slot-scope="scope">
                  <el-button @click="handleDelete(scope.$index, form.showActors)" type="text">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>

        <!--第三步 门票信息 -->
        <el-form v-if="ticketForm.show" :model="ticketForm" :visible.sync="dialogFormVisible">
          <el-form-item label="门票类型" :label-width="formLabelWidth">
            <el-input v-model="ticketForm.ticketType"></el-input>
          </el-form-item>
          <el-form-item label="门票价格(元)" :label-width="formLabelWidth">
            <el-input v-model="ticketForm.ticketPrice"></el-input>
          </el-form-item>
          <el-form-item label="门票总数" :label-width="formLabelWidth">
            <el-input v-model="ticketForm.ticketCount"></el-input>
          </el-form-item>
          <el-form-item label="限购数量" :label-width="formLabelWidth">
            <el-input v-model="ticketForm.limitPurchase"></el-input>
          </el-form-item>
          <el-form-item label="演出时间" :label-width="formLabelWidth">
            <el-date-picker
              disabled="true"
              v-model="form.showTime"
              type="datetime"
              placeholder="选择日期时间"
              default-time="12:00:00"
              value-format="timestamp">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="售票开始时间" :label-width="formLabelWidth">
            <el-date-picker
              v-model="ticketForm.beginTicketSaleTime"
              type="datetime"
              placeholder="选择开始日期时间"
              default-time="12:00:00"
              value-format="timestamp">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="售票截止时间" :label-width="formLabelWidth">
            <el-date-picker
              v-model="ticketForm.endTicketSaleTime"
              type="datetime"
              placeholder="选择截止日期时间"
              default-time="12:00:00"
              value-format="timestamp">
            </el-date-picker>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth">
            <el-button type="primary" @click="addTicket()">添加</el-button>
          </el-form-item>
          <el-form-item :label-width="formLabelWidth">
            <el-table
              :data="form.showTickets"
              ref="multipleTable"
              :highlight-current-row="true"
              border>
              <el-table-column
                prop="ticketType"
                label="门票类型">
              </el-table-column>
              <el-table-column
                prop="ticketPrice"
                label="门票价格(元)"
                :formatter="priceFormat">
              </el-table-column>
              <el-table-column
                prop="ticketCount"
                label="门票总数">
              </el-table-column>
              <el-table-column
                prop="limitPurchase"
                label="限购数量">
              </el-table-column>
              <el-table-column
                prop="beginTicketSaleTime"
                label="售票开始时间"
                :formatter="dateFormat">
              </el-table-column>
              <el-table-column
                prop="endTicketSaleTime"
                label="售票截止时间"
                :formatter="dateFormat">
              </el-table-column>
              <el-table-column
                fixed="right"
                label="操作">
                <template slot-scope="scope">
                  <el-button @click="handleDelete(scope.$index, form.showTickets)" type="text">删除</el-button>
                </template>
              </el-table-column>
            </el-table>
          </el-form-item>
        </el-form>

        <div slot="footer" class="dialog-footer">
          <el-button @click="btn_modify_cancel">取 消</el-button>
          <el-button v-if="!showForm.show" type="primary" @click="btn_back">上一步</el-button>
          <el-button v-if="!ticketForm.show" type="primary" @click="btn_next">下一步</el-button>
          <el-button type="primary" @click="btn_modify_submit">提 交</el-button>
        </div>

      </el-dialog>

      <!-- 点击删除按钮，删除确认框-->
      <el-dialog
        title="提示"
        :visible.sync="deleteDialogVisible"
        width="30%">
        <span v-if="form.showStatus!='已上架'">确定上架该演出? </span>
        <span v-if="form.showStatus=='已上架'">确定下架该演出? </span>
        <span slot="footer" class="dialog-footer">
        <el-button @click="deleteDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="handleClickUpDownConfirm">确 定</el-button>
      </span>
      </el-dialog>
    </div>
  </div>
</template>

<script>
  import axios from 'axios'
  import moment from 'moment'
  import { mapGetters } from 'vuex'

  export default {
    name: 'index',
    computed: {
      ...mapGetters([
        'name',
        'roles'
      ])
    },
    data() {
      return {
        tag: '',
        select_value: '', // 客户状态
        activeStep: 1,
        options: [{
          value: '待审核',
          label: '待审核'
        }, {
          value: '已上架',
          label: '已上架'
        }, {
          value: '已下架',
          label: '已下架'
        }],
        typeoptions: [{
          value: '摇滚',
          label: '摇滚'
        }, {
          value: '民谣',
          label: '民谣'
        }, {
          value: '流行',
          label: '流行'
        }, {
          value: '嘻哈',
          label: '嘻哈'
        }, {
          value: '电子',
          label: '电子'
        }, {
          value: '其它',
          label: '其它'
        }],
        allData: [], // 所有前端分页数据
        tableData: [], // 表格数据 仅展示当前页的数据
        pageNo: 1, // 当前页数
        totalDataNumber: 0, // 总记录数
        pageSize: 5,
        deleteDialogVisible: false, // 删除确认对话框
        dialogFormVisible: true, // 弹出添加代理商dialog form
        dialogFormModifyVisible: false, // 修改框
        formLabelWidth: '150px', // 弹出框form宽
        form: {
          id: '',
          showName: '',
          showType: '',
          showCover: '',
          showPrice: '',
          showStatus: '',
          showTime: '',
          showCity: '',
          showField: '',
          showFieldPhoto: '',
          showAddress: '',
          showOrganiser: '',
          showActors: [],
          showTickets: [],
          showPhotos: []
        },
        showForm: {
          show: true
        },
        actorForm: {
          show: false
        },
        ticketForm: {
          show: false
        }
      }
    },
    methods: {
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url
        this.dialogVisible = true
      },
      dateFormat(row, column) {
        var date = row[column.property]
        if (date === undefined) {
          return ''
        }
        return moment(date).format('YYYY-MM-DD HH:mm:ss')
      },
      priceFormat(row, column) {
        var date = row[column.property]
        if (date === undefined) {
          return ''
        }
        return date / 100
      },
      handleClose() {
        this.dialogFormModifyVisible = false
        this.clearForm()
      },
      uploadUrl() {
        return process.env.Upload_URL
      },
      handleSuccess1(res) {
        if (res.code === 10000) {
          this.form.showCover = res.imageUrl
        }
      },
      handleSuccess2(res) {
        if (res.code === 10000) {
          this.form.showFieldPhoto = res.imageUrl
        }
      },
      handleSuccess3(res) {
        if (res.code === 10000) {
          this.actorForm.actorImgUrl = res.imageUrl
        }
      },
      handleSuccess4(res) {
        if (res.code === 10000) {
          this.form.showOrganiserPhoto = res.imageUrl
        }
      },
      handleSuccess5(res) {
        var imgUrl = process.env.BASE_API + '/show/getimg?fileUrl='
        if (res.code === 10000) {
          this.form.showPhotos.push({
            showImgUrl: res.imageUrl,
            url: imgUrl + res.imageUrl
          })
        }
      },
      handleDelete(index, rows) {
        rows.splice(index, 1)
      },
      handleRemove1(file, fileList) {
        console.log(file, fileList)
        this.form.showCover = ''
      },
      handleRemove2(file, fileList) {
        console.log(file, fileList)
        this.form.showFieldPhoto = ''
      },
      handleRemove3(file, fileList) {
        console.log(file, fileList)
        this.actorForm.actorImgUrl = ''
      },
      handleRemove4(file, fileList) {
        console.log(file, fileList)
        this.form.showOrganiserPhoto = ''
      },
      handleRemove5(file, fileList) {
        console.log(file, fileList)
        this.form.showPhotos = fileList
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      handleExceed2(files, fileList) {
        this.$message.warning(`当前限制选择 10 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      addActor() {
        if (this.actorForm.actorName === '' || this.actorForm.actorName === undefined) {
          this.$message.error('请输入艺人名字，艺人名字不能为空')
          return
        }
        if (this.actorForm.actorImgUrl === '' || this.actorForm.actorImgUrl === undefined) {
          this.$message.error('请输入艺人图片，艺人图片不能为空')
          return
        }
        if (this.form.showActors.length > 4) {
          this.$message.error('最多设置5个艺人')
          return
        }
        var imgUrl = process.env.BASE_API + '/show/getimg?fileUrl='
        this.form.showActors.push({
          actorName: this.actorForm.actorName,
          actorImgUrl: this.actorForm.actorImgUrl,
          actorImgRealUrl: imgUrl + this.actorForm.actorImgUrl
        })
        this.actorForm.actorName = ''
        this.actorForm.actorImgUrl = ''
        this.$refs.upload.clearFiles()
      },
      addTicket() {
        if (this.ticketForm.ticketType === '' || this.ticketForm.ticketType === undefined) {
          this.$message.error('请输入门票类型，门票类型不能为空')
          return
        }
        if (this.ticketForm.ticketPrice === '' || this.ticketForm.ticketPrice === undefined) {
          this.$message.error('请输入门票价格，门票价格不能为空')
          return
        }
        if (this.ticketForm.ticketCount === '' || this.ticketForm.ticketCount === undefined) {
          this.$message.error('请输入门票数量，门票数量不能为空')
          return
        }
        if (this.ticketForm.limitPurchase === '' || this.ticketForm.limitPurchase === undefined) {
          this.$message.error('请输入限购数量，限购数量不能为空')
          return
        }
        if (this.ticketForm.beginTicketSaleTime === '' || this.ticketForm.beginTicketSaleTime === undefined) {
          this.$message.error('请输入售票开始时间，售票开始时间不能为空')
          return
        }
        if (this.ticketForm.endTicketSaleTime === '' || this.ticketForm.endTicketSaleTime === undefined) {
          this.$message.error('请输入售票截止时间，售票截止时间不能为空')
          return
        }
        if (this.ticketForm.beginTicketSaleTime >= this.ticketForm.endTicketSaleTime) {
          this.$message.error('售票开始时间必须小于售票截止时间，请重新选择')
          return
        }
        if (this.ticketForm.endTicketSaleTime >= this.form.showTime) {
          this.$message.error('售票截止时间必须小于演出时间，请重新选择')
          return
        }
        var ticketCount = Number(this.ticketForm.ticketCount)
        var limitPurchase = Number(this.ticketForm.limitPurchase)
        if (ticketCount < 1) {
          this.$message.error('门票数量格式有误')
          return
        }
        if (limitPurchase < 1) {
          this.$message.error('限购数量格式有误')
          return
        }
        if (limitPurchase > ticketCount) {
          this.$message.error('限购数量不能大于门票数量')
          return
        }
        this.form.showTickets.push({
          ticketPrice: this.ticketForm.ticketPrice * 100,
          ticketType: this.ticketForm.ticketType,
          ticketCount: this.ticketForm.ticketCount,
          limitPurchase: this.ticketForm.limitPurchase,
          beginTicketSaleTime: this.ticketForm.beginTicketSaleTime,
          endTicketSaleTime: this.ticketForm.endTicketSaleTime
        })
        this.form.showTickets.sort(function(a, b) {
          return a.ticketPrice - b.ticketPrice
        })
        this.ticketForm.ticketPrice = ''
        this.ticketForm.ticketType = ''
        this.ticketForm.ticketCount = ''
        this.ticketForm.limitPurchase = ''
        this.ticketForm.beginTicketSaleTime = ''
        this.ticketForm.endTicketSaleTime = ''
      },
      btn_back() {
        if (this.actorForm.show) {
          this.showForm.show = true
          this.actorForm.show = false
          this.ticketForm.show = false
          this.activeStep--
        } else if (this.ticketForm.show) {
          this.showForm.show = false
          this.actorForm.show = true
          this.ticketForm.show = false
          this.activeStep--
        }
      },
      btn_next() {
        if (this.showForm.show) {
          this.showForm.show = false
          this.actorForm.show = true
          this.ticketForm.show = false
          this.activeStep++
        } else if (this.actorForm.show) {
          this.showForm.show = false
          this.actorForm.show = false
          this.ticketForm.show = true
          this.activeStep++
        }
      },
      btn_search() {
        const vm = this
        axios.get(process.env.BASE_API + '/show/search', {
          params: {
            tag: this.tag,
            status: this.select_value
          }
        }).then(function(response) {
          var obj = response.data
          if (obj.code !== 10000) {
            vm.$message.error(obj.message)
            vm.totalDataNumber = 0
            vm.allData = []
            vm.tableData = []
          } else {
            vm.totalDataNumber = parseInt(obj.totalDataNumber)
            if (vm.totalDataNumber > 0) {
              vm.allData = obj.data
              vm.tableData = obj.data.slice(0, vm.pageSize)
            } else {
              vm.allData = []
              vm.tableData = []
            }
          }
        }).catch(function(error) {
          alert(error)
        })
      },
      btn_clear() {
        this.tag = ''
        this.select_value = ''
      },
      handleCurrentChange(val) {
        this.tableData = this.allData.slice((this.pageNo - 1) * this.pageSize, this.pageNo * this.pageSize)
      },
      btn_create_cancel() {
        this.dialogFormVisible = false
      },
      btn_modify_cancel() {
        this.dialogFormModifyVisible = false
        this.clearForm()
      },
      btn_modify_submit() {
        if (this.form.showName === '' || this.form.showName === undefined) {
          this.$message.error('请输入演出名称，演出名称不能为空')
          return
        } else {
          const vm = this
          var params = new URLSearchParams()
          params.append('showId', vm.form.id)
          params.append('showName', vm.form.showName)
          params.append('showType', vm.form.showType)
          params.append('showCover', vm.form.showCover)
          params.append('showStatus', vm.form.showStatus)
          params.append('showTime', vm.form.showTime)
          params.append('showCity', vm.form.showCity)
          params.append('showField', vm.form.showField)
          params.append('showFieldPhoto', vm.form.showFieldPhoto)
          params.append('showAddress', vm.form.showAddress)
          params.append('showOrganiser', vm.form.showOrganiser)
          params.append('showOrganiserPhoto', vm.form.showOrganiserPhoto)
          params.append('showActorsJson', JSON.stringify(vm.form.showActors))
          params.append('showTicketsJson', JSON.stringify(vm.form.showTickets))
          params.append('showPhotosJson', JSON.stringify(vm.form.showPhotos))
          axios.post(process.env.BASE_API + '/show/update', params).then(function(response) {
            var obj = response.data
            if (obj.code !== 10000) {
              vm.$message.error(obj.message)
            } else {
              vm.$message(obj.message)
              vm.pageNo = 1
              vm.btn_search()
            }
          }).catch(function(error) {
            alert(error)
          })
          vm.clearForm()
          vm.dialogFormModifyVisible = false
        }
      },
      handleClickModify(row) {
        this.form = row
        var imgUrl = process.env.BASE_API + '/show/getimg?fileUrl='
        if (this.form.showCover === '' || this.form.showCover === undefined || this.form.showCover === null) {
          this.form.showCoverList = []
          this.form.showCover = ''
        } else {
          var showCoverUrl = imgUrl + this.form.showCover
          this.form.showCoverList = [{ name: '演出封面.jpeg', url: showCoverUrl }]
        }
        if (this.form.showFieldPhoto === '' || this.form.showFieldPhoto === undefined || this.form.showFieldPhoto === null) {
          this.form.showFieldPhotoList = []
          this.form.showFieldPhoto = ''
        } else {
          var showFieldPhotoUrl = imgUrl + this.form.showFieldPhoto
          this.form.showFieldPhotoList = [{ name: '演出场地.jpeg', url: showFieldPhotoUrl }]
        }
        if (this.form.showOrganiserPhoto === '' || this.form.showOrganiserPhoto === undefined || this.form.showOrganiserPhoto === null) {
          this.form.showOrganiserPhotoList = []
          this.form.showOrganiserPhoto = ''
        } else {
          var showOrganiserPhotoUrl = imgUrl + this.form.showOrganiserPhoto
          this.form.showOrganiserPhotoList = [{ name: '主办方照片.jpeg', url: showOrganiserPhotoUrl }]
        }
        this.form.actorImgUrlList = []
        if (this.form.showType === '' || this.form.showType === undefined || this.form.showType === null) {
          this.form.showType = ''
        }
        if (this.form.showPrice === '' || this.form.showPrice === undefined || this.form.showPrice === null) {
          this.form.showPrice = ''
        }
        if (this.form.showCity === '' || this.form.showCity === undefined || this.form.showCity === null) {
          this.form.showCity = ''
        }
        if (this.form.showField === '' || this.form.showField === undefined || this.form.showField === null) {
          this.form.showField = ''
        }
        if (this.form.showAddress === '' || this.form.showAddress === undefined || this.form.showAddress === null) {
          this.form.showAddress = ''
        }
        if (this.form.showOrganiser === '' || this.form.showOrganiser === undefined || this.form.showOrganiser === null) {
          this.form.showOrganiser = ''
        }
        if (this.form.showTime === '' || this.form.showTime === undefined || this.form.showTime === null) {
          this.form.showTime = ''
        }
        if (this.form.showActors.length > 0) {
          var arr = this.form.showActors
          for (var i = 0; i < arr.length; i++) {
            arr[i].actorImgRealUrl = imgUrl + arr[i].actorImgUrl
          }
        }
        if (this.form.showPhotos.length > 0) {
          var arr1 = this.form.showPhotos
          this.form.showPhotos = []
          for (var n = 0; n < arr1.length; n++) {
            this.form.showPhotos.push({
              id: arr1[n].id,
              showImgUrl: arr1[n].showImgUrl,
              url: imgUrl + arr1[n].showImgUrl
            })
          }
        }
        this.form.showTickets.sort(function(a, b) {
          return a.ticketPrice - b.ticketPrice
        })
        this.dialogFormModifyVisible = true
      },
      handleClickUpDownConfirm() {
        const vm = this
        var params = new URLSearchParams()
        params.append('showId', this.form.id)
        axios.post(process.env.BASE_API + '/show/updown', params).then(function(response) {
          var obj = response.data
          if (obj.code !== 10000) {
            vm.$message.error(obj.message)
          } else {
            vm.$message(obj.message)
            vm.deleteDialogVisible = false
            vm.pageNo = 1
            vm.btn_search()
          }
        }).catch(function(error) {
          alert(error)
        })
      },
      handleClickUpDown(row) {
        this.form = row
        this.deleteDialogVisible = true
      },
      clearForm() {
        this.activeStep = 1
        this.showForm.show = true
        this.actorForm.show = false
        this.ticketForm.show = false
        this.pageNo = 1
        this.btn_search()
      }
    }
  }
</script>

<style scoped>
  .orderform {
    padding-top: 20px;
    padding-left: 10px;
    padding-right: 10px;
  }

  .mydiv {
    float: right;
    margin-right: 10px;
  }
</style>
